<template>
  <div id="ModalFirst">
    <p slot="header" class="modal_head">选择对象</p>
    <div class="modal_main">
      <!-- 左边模块 -->
      <div class="modal_left_w">
        <div class="modal_l_btn_w">
          <div class="m_l_btn_m">
            <Button class="ot_btn" v-for="(item, index) in checkPersonArray" :key="index">
              <span class="checkU">{{ item.name }}</span>
              <span class="modalPersonButtonClose" @click="checkPersonDelete(item, index)"></span>
            </Button>
          </div>
        </div>
        <div class="modal_b_w">
          <Button type="info" class="determine2_btn" @click="determine(true)">确定</Button>
          <Button class="close_btn" @click="determine(false)">取消</Button>
        </div>
      </div>
      <!-- 右侧选择组织架构 -->
      <div class="modal_right_w">
        <!-- 组织架构 -->
        <ul class="homeContact" v-if="modalCheckArray.show == false">
          <li v-for="(item, index) in modalFirstList" :key="'moadal_' + index" @click="setModalCheckArray(item, index)">
            <img draggable="false" :src="item.url" />
            <span>{{ item.title }}</span>
          </li>
        </ul>
        <!-- 组织架构列表 -->
        <div v-if="modalCheckArray.show != false" class="modal_arr_box">
          <!-- 标题：按组织架构查找 -->
          <div class="modal_r_s_t">
            <span class="modalBack" @click="setModalCheckArray(null)"></span>
            <h3>按{{ modalCheckArray.title }}查找</h3>
          </div>
          <div v-if="modalCheckArray.id == 1" class="modal_nav_box">
            <div class="modal_nav">
              <div class="modal_nav_item" v-for="(item, index) in modalCheckArray.navList" :key="index">
                <span v-if="index != 0" class="m_v_i_f">/</span>
                <span class="navTitle" v-if="index != modalCheckArray.navList.length - 1" @click="setModalIndex(item, index)">{{ item.value }}</span>
                <span v-else class="m_n_v">{{ item.value }}</span>
              </div>
            </div>
            <ul class="modal_stru_box">
              <li v-for="(item, index) in modalCheckArray.list2[
                  this.modalCheckArray.index
                ]" class="modalFirendList" @click="modalGetStru(item, index)" :key="index">
                <span class="checkSpan" :class="{ chooseSpan: item.isChoose }" @click.stop="setStruChoose(item, index)"></span>
                <img draggable="false" :src="
                    item.FID
                      ? require('../../../static/image/home/next.png')
                      : require('../../../static/image/home/person_' +
                          ((item.GENDER || item.gender || item.SEX) == 1
                            ? 1
                            : 2) +
                          '.png')
                  " class="stru_icon" :class="{ fidNextImg: item.FID }" />
                <span>{{ item.LEABLE }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGroup } from "@/api/structureList.js";
export default {
  data() {
    return {
      modalFirstList: [
        {
          id: 1,
          title: "组织架构",
          url: require("../../../static/image/home/contact/structure.png"),
          show: true,
          structureShow: false,
          structureList: [],
        },
      ],
      checkPersonArray: [],

      modalCheckArray: {
        show: false,
      },
      organizationChoose: false,
      openTreeList: [], // 组织架构打开的数组
    };
  },
  methods: {
    // 初始化组织列表
    getTreeList() {
      getGroup({}).then((info) => {
        info.data.map((item) => (item["isChoose"] = false));
        this.$set(this.modalFirstList[0], "structureList", info.data);
        for (let item of this.checkPersonArray) {
          for (let temp of info.data) {
            if (item.FID == temp.FID) {
              this.$set(temp, "isChoose", true);
              break;
            }
          }
        }
        this.openTreeList = info.data;
      });
    },
    // 点击组织架构图标
    setModalCheckArray(item, index) {
      let itemBool = item != null;
      this.$set(this.modalCheckArray, "show", itemBool);
      if (itemBool) {
        this.$set(this.modalCheckArray, "show", true);
        this.$set(this.modalCheckArray, "title", item.title);
        this.$set(this.modalCheckArray, "id", item.id);
        this.$set(this.modalCheckArray, "index", "all");
        this.$set(this.modalCheckArray, "navList", [
          {
            title: "all",
            value: "组织架构",
          },
        ]);

        Object.assign(this.modalCheckArray, {
          list2: {
            all: item.structureList,
          },
        });
      }
    },
    // 组织架构树状点击打开|选择
    modalGetStru(item, index) {
      if (item.FID) {
        if (item.isChoose) return;
        // 每次进入下一级部门前，改变index
        this.modalCheckArray.index = item.FID;
        this.organizationChoose = false;
        getGroup({ fid: item.FID }).then(
          (res) => {
            let result = res.data;
            result = result.filter((item) => item.FID);
            this.openTreeList = result;
            // 保证选取的部门，再进去改结构时还会被选取
            for (let i = 0; i < this.checkPersonArray.length; i++) {
              for (let j = 0; j < result.length; j++) {
                if (
                  result[j].FID &&
                  this.checkPersonArray[i].FID &&
                  result[j].FID == this.checkPersonArray[i].FID
                )
                  this.$set(result[j], "isChoose", true);
              }
            }
            this.modalCheckArray.list2[item.FID] = result;
            this.modalCheckArray.navList.push({
              title: item.FID,
              value: item.LEABLE,
            });
            this.$forceUpdate();
          },
          (reject) => {
            this.$message.error("系统异常");
          }
        );
      } else {
        this.setStruChoose(item, index);
      }
    },
    // 点击组织架构对应节点跳转
    setModalIndex(item, index) {
      this.modalCheckArray.index = item.title;
      this.openTreeList =
        this.modalCheckArray.list2[this.modalCheckArray.index];
      // this.setSelectAll(this.modalCheckArray.list2[this.modalCheckArray.index]);
      this.modalCheckArray.navList = this.modalCheckArray.navList.splice(
        0,
        index + 1
      );
    },
    // 选中对应组织
    setStruChoose(item, index) {
      let result = !item.isChoose;
      // 只能选择一个部门
      if (this.modalCheckArray.list2) {
        for (let temp of this.modalCheckArray.list2[
          this.modalCheckArray.index
        ]) {
          this.$set(temp, "isChoose", false);
        }
      }
      this.$set(item, "isChoose", result);
      if (!item.isChoose) {
        for (let i in this.checkPersonArray) {
          if (this.checkPersonArray[i].FID == item.FID) {
            this.checkPersonArray.splice(i, 1);
            return;
          }
        }
      }
      if (result) {
        item.id = item.id || item.NO || item.FID || item.ID;
        item.name = item.name || item.LEABLE || item.NAME;
        // 单选

        this.checkPersonArray = [item];
        console.log(this.checkPersonArray);
        // 选择的时候如果组织机构已经打开，默认选中
        if (this.openTreeList.length) {
          for (let temp of this.openTreeList) {
            if ((item.id || item.ID) == (temp.id || temp.ID)) {
              this.$set(temp, "isChoose", result);
              break;
            }
          }
        }
      } else {
        //   this.delCheckPerson(item.id);
      }
      this.$forceUpdate();
    },
    // 删除选中目标
    checkPersonDelete(item, index) {
      this.checkPersonArray.splice(index, 1);
      // 删除的时候如果组织机构已经打开，取消选中部门
      if (this.openTreeList.length) {
        for (let temp of this.openTreeList) {
          if (item.FID && temp.FID && item.FID == temp.FID) {
            this.$set(temp, "isChoose", false);
            break;
          }
        }
      }
      console.log(this.openTreeList);
      console.log("-------------------------");
      console.log(this.modalCheckArray.list2);
    },
    // 取消与确定按钮
    determine(bol) {
      this.$emit("getStructure", {
        bol: bol,
        list: this.checkPersonArray,
      });
      this.checkPersonArray = [];
    },
  },
  created() {
    this.getTreeList();
  },
};
</script>

<style lang="less" scoped>
#ModalFirst {
  position: absolute;
  z-index: 99999;
  top: 50%;
  left: 50%;
  bottom: initial;
  transform: translate(-50%,-50%);
  width: 520px;
  background: #fff;
  .modal_head {
    height: 45px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background: #f5f5f5;
  }
  .modal_main {
    display: flex;
    height: 30em;
    padding: 20px;
    .modal_left_w {
      width: 50%;
      display: flex;
      flex-direction: column;
      .modal_l_btn_w {
        flex-grow: 1;
        overflow: auto;
        .m_l_btn_m {
          position: relative;
          .my_btn {
            margin-bottom: 0.3em;
          }
          .ot_btn {
            position: relative;
            margin-right: 0.5em;
            margin-bottom: 0.5em;
            border: none;
            .checkU {
              padding: 10px 10px;
              display: inline-block;
              border: 1px solid #dddee1;
              color: #495060;
              background-color: #f7f7f7;
              border-radius: 4px;
              cursor: pointer;
            }
            .modalPersonButtonClose {
              width: 1em;
              height: 1em;
              position: absolute;
              background-size: 100% 100%;
              right: 0.2em;
              top: 0.2em;
              background: url(../../../static/image/home/windowDelete.png)
                no-repeat center center;
              &:hover {
                background: url(../../../static/image/home/close.png) no-repeat
                  center center;
              }
            }
          }
        }
      }
      .group_n_t {
        color: #cccccc;
        height: 4em;
        line-height: 4em;
      }
      .homeModalName {
        padding-left: 1em;
        width: 100%;
        border: 1px solid #cccccc;
        border-radius: 4px;
        height: 3em;
        outline: none;
      }
      .modal_b_w {
        margin-top: 1em;
        button {
          padding: 9px 15px;
          font-size: 12px;
          border-radius: 4px;
          border: none;
          color: #fff;
          margin-right: 15px;
          cursor: pointer;
        }
        .determine2_btn {
          background: #f59331;
          border-color: #f59331;
        }
        .close_btn {
          color: #495060;
          border: 1px solid #ddd;
        }
      }
    }
    .modal_right_w {
      width: 50%;
      height: 100%;
      .modal_search_box {
        position: relative;
        display: inline-block;
        border-bottom: 1px solid #2db7f5;
        .moadl_s_val {
          margin-left: 0.5em;
          height: 2em;
          border: none;
          outline: none;
        }
        .modalSearchResultUlStyle {
          background-color: #ffffff;
          box-shadow: 0 0 0 1px #cccccc;
          position: absolute;
          right: -8em;
          width: 22em;
          max-height: 20em;
          overflow: auto;
          padding: 0.5em;
          border-radius: 2px;
          .modalSearchList {
            padding: 0.5em;
            cursor: pointer;
          }
          .modalSearchList:hover {
            background-color: #eeeeee;
          }
          .modalSearchMore {
            width: 100%;
            display: block;
            text-align: center;
            color: orange;
            padding: 5px;
            cursor: pointer;
            background: #eee;
            font-size: 14px;
          }
        }
      }
      .modal_arr_box {
        height: 95%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .modal_r_s_t {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          padding: 5px;
          .modalBack {
            display: inline-block;
            width: 1em;
            height: 1em;
            background: url(../../../static/image/home/undo.png) no-repeat
              center center;
            cursor: pointer;
            margin-right: 1em;
            &:hover {
              background: url(../../../static/image/home/undo_hover.png)
                no-repeat center center;
            }
          }
          & > h3 {
            font-weight: 700;
            font-size: 1.4em;
          }
        }
        .modal_firend_box {
          overflow: hidden;
          display: flex;
          flex-direction: column;
          & > ul {
            overflow: auto;
            .modalFirendList {
              display: flex;
              align-items: center;
              cursor: pointer;
              padding: 0.5em;
              &:hover {
                background-color: #eeeeee;
              }
              .person_img {
                width: 3em;
                height: 3em;
                margin-right: 1em;
              }
              .groupNameList {
                margin-left: 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
        .modal_nav_box {
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .modal_nav {
            padding: 0.5em;
            padding-left: 1.8em;
            flex-shrink: 0;
            .modal_nav_item {
              display: inline-block;
              .m_v_i_f {
                margin: 0 0.5em;
                width: 100%;
                word-break: break-all;
              }
              .navTitle {
                cursor: pointer;
                &:hover {
                  color: dodgerblue;
                  background-color: #f0f3f5;
                }
              }
              .m_n_v {
                width: 2em;
                height: 2em;
                margin-left: 8px;
              }
            }
          }
          .modal_stru_box {
            flex-grow: 1;
            overflow: auto;
            .modalFirendList {
              display: flex;
              align-items: center;
              cursor: pointer;
              padding: 0.5em;
              &:hover {
                background-color: #eeeeee;
              }
              .stru_icon {
                width: 2em;
                height: 2em;
                margin-right: 1em;
              }
            }
          }
        }
      }
    }
    .homeContact {
      text-align: left;
      li {
        cursor: pointer;
        &:hover {
          background-color: #f5f6f7;
        }
        padding: 1em 1em;
        img {
          width: 3em;
          height: 3em;
          vertical-align: middle;
          margin-right: 0.8em;
        }
        span {
          font-size: 1.2em;
          font-weight: bold;
        }
        p {
          background: url(../../../static/image/home/dropDown.png) no-repeat
            center center;
          width: 1em;
          height: 1em;
          display: inline-block;
        }
        &:hover p {
          background: url(../../../static/image/home/dropDown_hover.png)
            no-repeat center center;
        }
        ul {
          margin-left: 2em;
          margin-top: 1em;
          li {
            font-weight: bold;
            div {
              margin-right: 0.5em;
              display: inline-block;
              width: 1em;
              height: 1em;
              background: url(../../../static/image/home/contact/rectangular.png)
                no-repeat left center;
            }
          }
        }
      }
    }
  }
  .selectAll {
    padding: 0.5em;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    &:hover {
      background-color: #eeeeee;
    }
  }
  .checkSpan::after {
    content: "\2714";
    display: inline-block;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    color: #fff;
    margin-right: 1em;
    background-color: #e0e0e0;
  }
  .chooseSpan:after {
    content: "\2714";
    display: inline-block;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    color: #ffffff;
    margin-right: 1em;
    background-color: #fa7500 !important;
  }
}
</style>
